import Taro, { Component, Config } from '@tarojs/taro'
import { View,Image,Text ,Swiper,SwiperItem} from '@tarojs/components'
import { AtIcon, AtTabs, AtTabsPane, } from 'taro-ui'
import icon1 from '../images/icon1.png'

import './Index.scss'



class Index extends Component {

  state = {
    value: '',
    tabList: [
      { title: '优选' },
      { title: '女装' },
      { title: '男装' },
      { title: '内衣' },
      { title: '美妆' },
      { title: '配饰' },
      { title: '鞋子' },
      { title: '个护' },
      { title: '图书' },
      { title: '更多' }
    ],
    current: 0,
    ChangeNav: false,
    entrance:[
      {
        title: "必推清单",
        subTitle: null,
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/Ck23wetdlBL5FOTC0senlrl9BDgrKCtlqFyN85PI.png",
        url: ""
      },
      {
        title: "9.9包邮",
        subTitle: null,
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/7FERlt9b2kZwV9WQUeF914thnNry8ge82bVmfZVe.png",
        url: ""
      },
      {
        title: "超级转",
        subTitle: "品牌券",
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/dKZ1w0CJEaDjisMXSJHri6iH0fk9AAROIHfUYovK.png",
        url: ""
      },
      {
        title: "网红爆款",
        subTitle: "潮流范",
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/MGvMX93oeUYQKCpLVQK0oXjudmuVFfl9qt4W1dZr.png",
        url: "hongtang://webview?url=https%3A%2F%2Fh5.easytbk.com%2Fpresell%3Fid%3D9%26apiurl%3Dapp.easytbk.com&oauth=2"
      },
      {
        title: "新疆包邮",
        subTitle: "有好货",
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/qROUDuhbVf5MoZXdYEbRbza4aEfGkAXxJsPcPR7N.png",
        url: ""
      },
      {
        title: "活力榜",
        subTitle: "好券直播",
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/0TPrLsjkI0RWsiEZ99IichvGPDFPgcImiCnZ3nDU.png",
        url: ""
      },
      {
        title: "销量榜",
        subTitle: "高佣榜",
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/W6K0ulEyqQNHRoDqoLYnGByw73vamTsEieGIQ62E.png",
        url: "hongtang://webview?url=https%3A%2F%2Fh5.easytbk.com%2Fpresell%3Fid%3D6%26apiurl%3Dapp.easytbk.com&oauth=2"
      },
      {
        title: "转化榜",
        subTitle: "特惠",
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/X2UG5PE6RTkCNRzregy5pcfbPxxc2IOsyNnS1sEt.png",
        url: ""
      },
      {
        title: "品牌闪购",
        subTitle: "高佣榜",
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/1MBSLDeySfZMXjezfVd7uqu02yzmTNXtVjWEUImS.png",
        url: ""
      },
      {
        title: "助农板块",
        subTitle: "过年领大礼",
        logo: "https://ht-dev.oss-cn-beijing.aliyuncs.com/images/20200118/v8pRNxXzlaiewNR1DtFMPCvXPDm7ZaMomF6LVM05.png",
        url: ""
      }
    ],
    count:5,
    banner:[
      {
        img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582711806334&di=e72305e699bd9f29af6d815296f2cede&imgtype=0&src=http%3A%2F%2Fpic191.nipic.com%2Ffile%2F20181114%2F27708798_110743608086_2.jpg'
      },      {
        img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582711806334&di=e72305e699bd9f29af6d815296f2cede&imgtype=0&src=http%3A%2F%2Fpic191.nipic.com%2Ffile%2F20181114%2F27708798_110743608086_2.jpg'
      },      {
        img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582711806334&di=e72305e699bd9f29af6d815296f2cede&imgtype=0&src=http%3A%2F%2Fpic191.nipic.com%2Ffile%2F20181114%2F27708798_110743608086_2.jpg'
      },
    ],
    pList:[1,2,3,4,5]
  };

  config: Config = {
    navigationBarTitleText: '折草',
  };

  handleClick(e) {
    this.setState({
      current: e
    })
  }
  handleChange(value) {
    this.setState({
      value
    })
  }
  ChangeNavFn = (value) => {
    this.setState({
      ChangeNav: !this.state.ChangeNav,
      current: value
    })
  };

  fnNaigate=n=>{
    let url='';
    switch (n){
      case 1:
        url='/pages/Search/Search?type='+2;
        break;
      case 2:
        url='/pages/ProductDetails/Details';
    }

    Taro.navigateTo({url})
  };

  render() {
    const {current,tabList,entrance,banner,pList} = this.state;
    return (
      <View className='index'>

        <View className='search' onClick={this.fnNaigate.bind(this,1)}>
          <AtIcon value='search' size='16' color='#ccc' />
          粘贴宝贝或输入关键词搜索
        </View>

        <AtTabs
          current={current}
          tabList={tabList}
          onClick={(e)=>this.handleClick(e)}
          scroll
          swipeable={false}
          animated={false}
        >
          <AtTabsPane current={current} index={0}>

            <Swiper
              className='bannerBox'
              indicatorColor='#999'
              indicatorActiveColor='#333'
              circular
              indicatorDots
              autoplay
            >
              {
                banner.map((item,index)=>(
                  <SwiperItem>
                    <Image
                      className='bannerImg'
                      src={item.img}
                    />
                  </SwiperItem>
                ))
              }

            </Swiper>

            <View className='entranceBox'>
              {
                entrance.map((EItem,index)=>(
                  <View className='entranceItem' key={index}>
                    <Image className='entranceImg' src={EItem.logo}/>
                    <Text>{EItem.title}</Text>
                  </View>
                ))
              }
            </View>
            {
              pList.map(()=>(
                <View className='product' onClick={this.fnNaigate.bind(this,2)}>


                  <Image className='PImg' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582711806334&di=e72305e699bd9f29af6d815296f2cede&imgtype=0&src=http%3A%2F%2Fpic191.nipic.com%2Ffile%2F20181114%2F27708798_110743608086_2.jpg' />
                  <View className='textBox'>

                    <View className='textBoxTop'>
                      <View className='textBoxTitle'>
                        {/*<Text>京东</Text>*/}
                        <Image src={icon1} mode='widthFix'/>
                        这是一个标题这是一个标题1这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题
                      </View>
                      <View className='coupon'>
                        <Text>券 20元</Text>
                        <Text>赚 2.98元</Text>
                      </View>
                    </View>

                    <View className='priceBox'>
                      <Text>券后￥<Text className='price'>99.8</Text></Text>
                      <Text className='sellNum'>23566人购买</Text>
                    </View>

                  </View>


                </View>
              ))
            }


          </AtTabsPane>
          <AtTabsPane current={current} index={1}>

          </AtTabsPane>

        </AtTabs>
      </View>
    )
  }
}

export default Index;
